<template>
    <van-nav-bar :title="GovernmentInfo.name || '标题'" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
        <template #right>
            <van-icon name="wap-home-o" size="18" />
        </template>
    </van-nav-bar>

    <div v-if="loading" class="loading-container">
        <van-skeleton :row="2" class="my-skeleton-title" />
        <van-skeleton :row="2" class="my-skeleton-editor" />
        <van-skeleton :row="1" class="my-skeleton-content" />
    </div>

    <div v-else-if="error" class="error-container">
        <van-icon name="failure" size="48" color="#ff4757" />
        <p class="error-text">加载失败，请重试</p>
        <van-button type="primary" @click="GetGovernmentInfo()">重新加载</van-button>
    </div>

    <div v-else class="pd30">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="listLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="newsItem in list" :key="newsItem.id" class="news-box">
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>

</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { navigateTo, useRoute } from 'nuxt/app';


// 获取路由参数
const route = useRoute();
const newsId = computed(() => route.params.agency as string);
// 定义新闻详情数据类型
const GovernmentInfo = ref<any>({});
//定义页面的骨架屏状态
const loading = ref(false);
const error = ref(false);
// 滚动加载和刷新相关状态
const list = ref<any[]>([]);
const listLoading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);

//时间格式化
const dayjs = useDayjs();
const safeFormatRelativeTime = (time: string | null | undefined) => {
    if (!time) return '';
    const now = dayjs();
    const target = dayjs(time);
    // 如果是当天时间，显示相对时间（如 "2 小时前"）
    if (target.isSame(now, 'day')) {
        return target.fromNow();
    }
    // 非当天时间，显示完整年月日（如 "2023-01-01"）
    return target.format('YYYY-MM-DD');
};

// 获取新闻详情数据
const GetGovernmentInfo = async () => {
    if (!newsId.value) return;
    try {
        loading.value = true; 
        const responseData = await $fetch('/api/government/agency', {
            params: {
                agencyid: newsId.value
            }
        }); 
        if (responseData?.data) {
            GovernmentInfo.value = responseData.data[0];
            console.log(GovernmentInfo.value);
        } else { 
            console.error('未获取到新闻数据');
            error.value = true;
        }
    } catch (err: any) {
        console.error('获取新闻详情失败:', err.message || err);
        error.value = true;
    } finally {
        loading.value = false;
        console.log('请求处理完成');
    }
};



//返回上一页
const onClickLeft = () => {
    history.back();
};

//返回首页

const onClickRight = () => {
    navigateTo('/');
}


// 组件挂载时获取数据
onMounted(() => {
    GetGovernmentInfo();
});
</script>


<style scoped>
.news-title {
    font-size: 28px;
    line-height: 32px;
    padding: 40px 0 20px;
}

.my-skeleton-title {
    padding: 40px 15px 20px;
}

.my-skeleton-title :deep(.van-skeleton-paragraph) {
    height: 32px;
}

.my-skeleton-content :deep(.van-skeleton-paragraph) {
    min-height: calc(100vh - 150px);
    margin-top: 30px;
    width: 100% !important;
}


.news-maker,
.news-creat-time {
    font-size: 12px;
    color: #999;
    line-height: 16px;
    margin-bottom: 6px;
}

.news-content {
    margin-top: 30px;
}


:deep(.news-content *) {
    font-size: 17px;
    line-height: 30px;
    color: #000;
}

:deep(.news-content img) {
    width: calc(100% + 30px);
    margin: 12px -15px !important;
}

:deep(.news-content video) {
    width: calc(100% + 30px);
    margin: 12px -15px;
}

.other-news,
.news-comment {
    margin-top: 40px;
    padding-bottom: 60px;
}

:deep(.news-content .content-btn) {
    margin-top: 12px;
}

:deep(.news-content .content-btn .header-content div) {
    background-color: #fff;
}

:deep(.news-content .content-btn *) {
    font-size: 14px !important;
    line-height: 22px !important;
    color: #999;
}
</style>